<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
   ______                  __  __
  / ____/___  __  ______  / /_/ /_  __
 / /   / __ \/ / / / __ \/ __/ / / / /
/ /___/ /_/ / /_/ / / / / /_/ / /_/ /
\____/\____/\__,_/_/ /_/\__/_/\__, /
              http://count.ly/____/
-->
<html>
<head>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta name="referrer" content="no-referrer">
    <link rel="stylesheet" href="stylesheets/font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" href="stylesheets/vue/clyvue.css" type='text/css'>
	<link href='stylesheets/pre-login/main.css' rel='stylesheet' type='text/css'>
	<link rel="icon" type="image/png" href="<%- countlyFavicon %>">
    <% if (themeFiles && themeFiles.css) { %>
        <% for(var i=0, l=themeFiles.css.length; i<l; i++) {%>
    <link href='<%= themeFiles.css[i]%>' rel='stylesheet' type='text/css'>
        <% } %>
    <% } %>
	<title><%- countlyTitle %></title>
	<script>window.countlyGlobal = window.countlyGlobal || {}; countlyGlobal["cdn"] = "<%- cdn %>";</script>
    <% if (typeof inject_template.css != 'undefined') { %>
	<style><%- inject_template.css %></style>
	<% } %>
</head>
<body>
    <div class="wrapper">
        <div id="top-container">
            <div class="top-button" id="select-lang">
                <div id="active-lang">EN</div>
                <div id="langs">
                    <div class="group">
                    <% for(var i=0, l=(languages.length/2); i<l; i++) {%>
                        <a data-language-code="<%=languages[i].code%>" class="item"><%=languages[i].name%></a>
                    <% } %>
                    </div>
                    <div class="group">
                    <% for(var i=(parseInt(languages.length/2) + 1), l=languages.length; i<l; i++) {%>
                        <a data-language-code="<%=languages[i].code%>" class="item"><%=languages[i].name%></a>
                    <% } %>
                    </div>
                </div>
            </div>
            <div id="login-logo"></div>
        </div>
        <h1 style="font-weight: 500; text-align: center; line-height: 48px;" id="header" data-localize="setup.title"></h1>
		<div style="height: 40px; font-size: 14px; color: #333C48; text-align: center; width: 578px; margin: 0 auto 16px; line-height: 21px;" data-localize="setup.explanation"></div>
        <div id="forgot-form" style="width:304px; margin:auto;">
            <form id="account-form" method="POST" style="width:300px; margin:auto;">
                <div>
                    <p style="float:left;color: #333C48;font-weight: 500;margin-bottom:8px" data-localize="setup.full-name"></p>
                    <input autocapitalize="off" autocomplete="<% if(security.autocomplete) {%>on<%} else { %>off<%}%>" type="text" name="full_name" id="full_name" placeholder="Enter your full name" data-localize="placeholder.full-name"<% if (params && params.full_name){ %> value="<%- params.full_name %>" <% } %>/>
                    <label id="full_name-error" class="error" for="full_name" style="display: none;" data-localize="setup.error-full-name"></label>
                </div>
                <div>
                    <p style="float:left;color: #333C48;font-weight: 500;margin-bottom:8px" data-localize="login.email-adress"></p>
                    <input autocapitalize="off" oninput="this.value = this.value.toLowerCase();" autocomplete="<% if(security.autocomplete) {%>on<%} else { %>off<%}%>" type="email" name="email" id="email" placeholder="Enter your email adress" data-localize="placeholder.email"<% if (params && params.email){ %> value="<%- params.email %>" <% } %>/>
                    <label id="email-error" class="error" for="email" style="display: none;" data-localize="setup.error-email"></label>
                </div>
                <div>
                    <p style="float:left;color: #333C48;font-weight: 500;margin-bottom:8px;text-align: start;min-width: 100px;" data-localize="setup.username"></p>
                    <input type="text" autocapitalize="off" autocomplete="<% if(security.autocomplete) {%>on<%} else { %>off<%}%>" name="username" id="username" placeholder="Enter your username" data-localize="placeholder.enter-username"<% if (params && params.username){ %> value="<%- params.username %>" <% } %>/>
                    <label id="username-error" class="error" for="username" style="display: none;" data-localize="setup.error-username"></label>
                </div>
                <div>
                    <p style="float:left;color: #333C48;font-weight: 500;margin-bottom:8px;text-align: start;min-width: 100px;" data-localize="login.password"></p>
                    <input name="password" id="password" type="password" autocomplete="<% if(security.autocomplete) {%>on<%} else { %>off<%}%>" placeholder="Password" data-localize="placeholder.password"<% if (params && params.password){ %> value="<%- params.password %>" <% } %>/>
                    <div id="password-requirements">
                        <ul>
                            <span class="dot"></span><li id="hint-password_min"  data-localize="management-users.password.length"></li>
                            <span class="dot"></span><li id="hint-password_char"  data-localize="management-users.password.has-char"></li>
                            <span class="dot"></span><li id="hint-password_number" data-localize="management-users.password.has-number"></li>
                            <span class="dot"></span><li id="hint-password_symbol"  data-localize="management-users.password.has-special"></li>
                        </ul>
                    </div>
                </div>
                <% if (typeof inject_template.form != "undefined") { %>
                    <%- inject_template.form %>
                <% } %>
                <div>
                    <input type="hidden" value="<%= csrf %>" name="_csrf" />
                    <input type="hidden" value="en" name="lang" id="form-lang" />
                    <input id="login-button" value="Create account" type="submit" data-localize="setup.button" style="margin-top: 16px;"/>
                </div>
                <div style="height: 100px;"></div>
            </form>
            <% if (typeof inject_template.html != "undefined") { %>
                <%- inject_template.html %>
            <% } %>
        </div>
        <div class="footer">
			<div>
				<p style="margin: 0px;">© <%= new Date().getFullYear() %> <%- countlyTitle %></p>
				<div style="margin: 0px; color: #0166D6;">
					<% if (countlyPage) { %> <a href="<%- countlyPage %>"> <%- countlyTitle %> </a> <% }%>
                    <% if (featureRequestLink) { %> <a href="<%- featureRequestLink %>" data-localize="login.terms"></a> <% }%>
                    <% if (feedbackLink) { %> <a href="<%- feedbackLink %>" data-localize="login.privacy"></a> <% }%>
                    <% if (documentationLink) { %> <a href="<%- documentationLink %>" data-localize="login.documentation"></a> <% }%>
                    <% if (helpCenterLink) { %> <a href="<%- helpCenterLink %>" data-localize="login.help-center"></a> <% }%>
				</div>
			</div>
		</div>
    </div>    
	<script language="javascript" type="text/javascript" src="javascripts/dom/jquery/jquery.js"></script>
	<script language="javascript" type="text/javascript" src="javascripts/utils/prefixfree.min.js"></script>
	<script language="javascript" type="text/javascript" src="javascripts/utils/store+json2.min.js"></script>
	<script language="javascript" type="text/javascript" src="javascripts/utils/jquery.i18n.properties-min-1.0.9.js"></script>
    <script language="javascript" type="text/javascript" src="javascripts/utils/jquery.xss.js"></script>
    <script language="javascript" type="text/javascript" src="javascripts/countly/countly.helpers.js"></script>
	<script language="javascript" type="text/javascript" src="javascripts/pre-login.js"></script>
    <script language="javascript" type="text/javascript" src="javascripts/utils/jquery.validate.js"></script>
	<script language="javascript" type="text/javascript" src="javascripts/utils/additional-methods.js"></script>

	<script>
        var countlyTitle = "<%- countlyTitle %>";
        var params = <%- JSON.stringify(params) %>;
        countlyGlobal.security = <%- JSON.stringify(security) %>;
        function validateForm() {
            var valid = true;
            var errors = [];
            if ($("#full_name").val().trim().length === 0) {
                valid = false;
                errors.push(jQuery.i18n.map["management-users.full_name.invalid"]);
            }
            if ($("#username").val().trim().length === 0) {
                valid = false;
                errors.push(jQuery.i18n.map["management-users.username.invalid"]);
            }
            if (!CountlyHelpers.validateEmail($("#email").val())) {
                valid = false;
                errors.push(jQuery.i18n.map["management-users.email.invalid"]);
            }
            if (CountlyHelpers.validatePassword($("#password").val())) {
                errors.push(jQuery.i18n.map["placeholder.password"] + ": " + CountlyHelpers.validatePassword($("#password").val()));
                valid = false;
            }
            $("#error-message").html(errors.join("<br/>"));
            return valid;
        }
        $(document).ready(function () {
            $("#username").focusin(function(){
                $(this).removeClass("error");
                $("#username-error").hide();
            });
            $("#username").focusout(function(){
                $(this).addClass("error");
                $("#username-error").show();
            });
            $("#full_name").focusin(function(){
                $(this).removeClass("error");
                $("#full_name-error").hide();
            });
            $("#full_name").focusout(function(){
                $(this).addClass("error");
                $("#full_name-error").show();
            });
            $("#email").focusin(function(){
                $(this).removeClass("error");
                $("#email-error").hide();
            });
            $("#email").focusout(function(){
                $(this).addClass("error");
                $("#email-error").show();
            });
            $("#account-form").validate({
                rules: {
                    username: {
                        required: true
                    },
                    full_name: {
                        required: true
                    },
                    email: {
                        required: true
                    },
                    password: {
                        required: {
                            depends: function(){
                                var password = $("#password").val();
                                if (password.length < countlyGlobal.security.password_min) {
                                    $('ul span:nth-of-type(1).dot').css("background-color", "red");
                                }
                                else{
                                    $('ul span:nth-of-type(1).dot').css("background-color", "green");
                                }
                                if (countlyGlobal.security.password_char && !/[A-Z]/.test(password)) {
                                    $('ul span:nth-of-type(2).dot').css("background-color", "red");
                                }
                                else{
                                    $('ul span:nth-of-type(2).dot').css("background-color", "green");
                                }
                                if (countlyGlobal.security.password_number && !/\d/.test(password)) {
                                    $('ul span:nth-of-type(3).dot').css("background-color", "red");
                                }
                                else{
                                    $('ul span:nth-of-type(3).dot').css("background-color", "green");
                                }
                                if (countlyGlobal.security.password_symbol && !/[^A-Za-z\d]/.test(password)) {
                                    $('ul span:nth-of-type(4).dot').css("background-color", "red");
                                }
                                else{
                                    $('ul span:nth-of-type(4).dot').css("background-color", "green");
                                }
                            }
                            
                        }
                    }
                },
                messages: {
                    username: {
                        required: encodeSomeHtml(jQuery.i18n.map["setup.error-username"])
                    },
                    full_name: {
                        required: encodeSomeHtml(jQuery.i18n.map["setup.error-full-name"])
                    },
                    email: {
                        required: encodeSomeHtml(jQuery.i18n.map["setup.error-email"])
                    }
                },
                escapeHtml: true
            });
            $('#login-button').click(function() {
                if(validateForm() === true){
                    $("#account-form").submit();
                }else{
                    if ($('#username').val().trim().length === 0) {
                        $("#username-error").show();
                        $("#username").addClass("error");
                    }
                    if ($("#full_name").val().trim().length === 0) {
                        $("#full_name-error").show();
                        $("#full_name").addClass("error");
                    }
                    if (!CountlyHelpers.validateEmail($("#email").val())) {
                        $("#email-error").show();
                        $("#email").addClass("error");
                    }
                    if (CountlyHelpers.validatePassword($("#password").val())) {
                        var password = $("#password").val();
                        if (password.length < countlyGlobal.security.password_min) {
                            $('ul span:nth-of-type(1).dot').css("background-color", "red");
                        }
                        else{
                            $('ul span:nth-of-type(1).dot').css("background-color", "green");
                        }
                        if (countlyGlobal.security.password_char && !/[A-Z]/.test(password)) {
                            $('ul span:nth-of-type(2).dot').css("background-color", "red");
                        }
                        else{
                            $('ul span:nth-of-type(2).dot').css("background-color", "green");
                        }
                        if (countlyGlobal.security.password_number && !/\d/.test(password)) {
                            $('ul span:nth-of-type(3).dot').css("background-color", "red");
                        }
                        else{
                            $('ul span:nth-of-type(3).dot').css("background-color", "green");
                        }
                        if (countlyGlobal.security.password_symbol && !/[^A-Za-z\d]/.test(password)) {
                            $('ul span:nth-of-type(4).dot').css("background-color", "red");
                        }
                        else{
                            $('ul span:nth-of-type(4).dot').css("background-color", "green");
                        }
                    }
                    return false;
                }
            });
        });
		$(document).ready(function() {
            $("#password-requirements li").first().text(jQuery.i18n.prop("management-users.password.length", countlyGlobal.security.password_min));
			if (jQuery.i18n.map["setup.title"]) {
                document.title = countlyTitle + " | " + jQuery.i18n.map["setup.title"];
            }
            var errorObj = <%- JSON.stringify(error) %>;
            if (errorObj.message && errorObj.message.length > 0) {
                var errI18n = []
                for (var i = 0; i < errorObj.message.length; i++) {
                    if (errorObj.message[i].indexOf('upchar') > 0) {
                        errI18n.push(jQuery.i18n.map["management-users.password.has-char"]);
                    } else if (errorObj.message[i].indexOf('min') > 0) {
                        errI18n.push(jQuery.i18n.prop("management-users.password.length", errorObj.passMinLen));
                    } else if (errorObj.message[i].indexOf('number') > 0) {
                        errI18n.push(jQuery.i18n.map["management-users.password.has-number"]);
                    } else if (errorObj.message[i].indexOf('special') > 0) {
                        errI18n.push(jQuery.i18n.map["management-users.password.has-special"]);
                    }
                } 
                $("#error-message").html(errI18n.join("<br/>"));
            }
            
		});

        $(document).ready(function() {
			$("*").click(function(event){
				if ($(".top-button").hasClass("active") && !$(event.target).is(".top-button") && !$(event.target).is("#active-lang")) {
					$('.top-button').removeClass('active');
				}
			});
		});
		$(document).ready(function() {
			$("*").click(function(event){
				if ($(event.target).is(".top-button") || $(event.target).is("#active-lang") && $(".top-button").hasClass("active")) {
					$('#active-lang').css('border','1px solid #81868D');
				}
				else{
					$('#active-lang').css('border','');
				}
			});
		});
		$(document).bind('clyLangChange', function() {
			if (jQuery.i18n.map["setup.title"]) {
                document.title = countlyTitle + " | " + jQuery.i18n.map["setup.title"];
            }
		});
	</script>
	<% if (typeof inject_template.js != 'undefined') { %>
	<script><%- inject_template.js %></script>
	<% } %>
     <% if (themeFiles && themeFiles.js) { %>
        <% for(var i=0, l=themeFiles.js.length; i<l; i++) {%>
    <script language="javascript" type="text/javascript" src="<%=themeFiles.js[i]%>"></script>
        <% } %>
    <% } %>
</body>
</html>
